//表
<template>
  <div>
    <el-container class="container">
      <el-header height=128px>
        <div class="head">
          <div class="head-left">
            <span class="head-title">Batch Process Parameter Report</span>
            <el-row class="head-selecter" type="flex">
              <el-col :span="6">
                <el-select
                  v-model="value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="6"><el-select
                v-model="value"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select></el-col>
              <el-col :span="6"><el-select
                v-model="value"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select></el-col>
              <el-col :span="6"><el-select
                v-model="value"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select></el-col>
              <el-date-picker 
                :span="6"
                v-model="data_value"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
              <el-button :span="6" icon="el-icon-search" circle></el-button>
            </el-row>
          </div>
          <div class="head-right">
            <div class="right-buttons">
              <el-row type="flex" class="row-bg" justify="end" style="margin-top:10px">
              <!-- <img src="@/assets/system_config/excel.png" /> -->
                <el-col :span="4"><button class="excel-button">Excel</button></el-col>
                <el-col :span="6"><button class="process-button">Import</button></el-col>
                <el-col :span="6"><button class="process-button">Export</button></el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-card class="card-right">
          <el-table
            :height="tableHeight"
            :data="tableData"
            :header-cell-style="{background:'rgb(20, 210, 136,0.2)'}"
            style="width: 100%">
            <el-table-column
              prop="Area_Line"
              label="Area/Line"
              width="180">
            </el-table-column>
            <el-table-column
              prop="Unit"
              label="Unit"
              width="180">
            </el-table-column>
            <el-table-column
              prop="BatchNo"
              label="Batch No."
              width="180">
            </el-table-column>
            <el-table-column
              prop="Step"
              label="Step"
              width="180">
            </el-table-column>
            <el-table-column
              prop="parameter"
              label="parameter"
              width="180">
            </el-table-column>
            <el-table-column
              prop="Target"
              label="Target"
              width="180">
            </el-table-column>
            <el-table-column
              prop="ActualValue"
              label="Actual Value"
              width="180">
            </el-table-column>
            <el-table-column
              prop="TimeStamp"
              label="Time Stamp"
              width="180">
            </el-table-column>
            <el-table-column
              prop="Status"
              label="Status"
              width="180">
            </el-table-column>
            <el-table-column
              prop="PIimpaction"
              label="PI impaction"
              width="180">
            </el-table-column>
            <el-table-column
              prop="Comments"
              label="Comments"
              width="180">
            </el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      tableHeight: window.innerHeight-300 ,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },//日期选择器的选择机制
      data_value: '',//日期选择器的值
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [{
        Area_Line:"test",
        Unit:"test",
        BatchNo:"test",
        Step:"test",
        parameter:"test",
        Target:"test",
        ActualValue:"test",
        TimeStamp:"test",
        Status:"test",
        PIimpaction:"test",
        Comments:"test"
      },],      
    }
  },
  methods: {
  
  },
  watch: {
    tableHeight(val){
        if (!this.timer)
        {
          this.tableHeight = val
          this.timer = true
          const that = this
          setTimeout(function()
          {
            that.timer = false
            }, 400)
        }
      }
  },
}
</script>
<style lang="less" scoped>
.head-right {
  width: 40%;
  margin-left: 60%;
  position: absolute;
  button {
    margin-right: 20px;
  }
}
.head-left {
  width: 60%;
  position: absolute;
  .head-selecter {
    margin-top: 20px;
  }
}
.log-class {
  color: #a4a2a2;
  font-family: "Hiragino Sans GB";
}
.excel-button {
  width: 42px;
  height: 42px;
  margin-top:5px;
  color: rgba(0, 0, 0, 0);
  background-color: transparent;
  border: 0;
  background-image: url("/static/img/system_config/excel.png");
}
.excel-button:focus {
  outline: 0 !important;
}
.excel-button:active {
  background-image: url("/static/img/system_config/1.png");
}
.process-button {
  width: 120px;
  height: 50px;
  border-radius: 30px;
  background-color: transparent;
  border-color: #14d288;
  font-size: 18px;
  color: #14d288;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
}
.process-button:focus {
  outline: 0 !important;
  color: white;
  background-color: #14d288;
}
.process-button:active {
  color: white;
  background-color: #14d288;
}
.process-button:hover {
  // color: black;
  // background-color: #ebfaf4;
}
.head-selecter {
  clear: both;
  float: left;
}
.head-title {
  margin-top:20px;
  height:45px;
  font-size: 30px;
  font-family: "Hiragino Sans GB";
  float: left;
}
.main-container-process {
  height: 100%;
}
.head {
  height: 15%;
  position: relative;
}
.container {
  height: 85%;
  // margin-top: 1%;
  position: relative;
}
/*滚动条样式*/
.card-right {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}
</style>